<!DOCTYPE html>
<html>
<head>
    <title>Data binding</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div data-role="view" id="scrollview-binding" data-title="Gallery 500px" data-stretch="true">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
        </div>
    </header>
    <div data-role="scrollview"
        data-source="_500pxDS"
        data-template="scrollview-binding-template"
        data-content-height="100%"
        data-enable-pager="false">
    </div>
</div>

<script id="scrollview-binding-template" type="text/x-kendo-template">
    <div>
        <p class="title">#: name #</p>
        <div class="image" style="background-image: url(#: image_url #);"></div>
    </div>
</script>

<script src="../content/spa/aeroviewr/js/500px.js"></script>

<script>
    _500px.init({
        sdk_key: 'a3be03a8a98d6e05af17f60d2cf4bf696eb47555'
    });

    var _500pxDS = new kendo.data.DataSource({
        transport: {
            read: function(options) {
                var params = {
                    feature: "popular",
                    exclude: "Nude",
                    image_size: 3,
                    page: options.data.page,
                    rpp: options.data.pageSize
                };

                _500px.api("/photos", params, function(response) {
                    options.success(response.data);
                });
            }
        },
        serverPaging: true,
        pageSize: 30,
        schema: {
            data: "photos",
            total: "total_items"
        }
    });
</script>

<style scoped>
    .title {
        font-style: italic;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .image {
        display: block;
        margin: 3em auto;
        height: 280px;
        width: 280px;
    }
</style>


    
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
    
    
</body>
</html>
